<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dom基础语法</title>
		<style>
			img{
				width: 200px;
			}
			.ok{
				color:red;
			}
			.error{
				color: purple;
			}
		</style>
		<script>
			
		</script>
	</head>
	<body>
		<h1 id="h1">Dom操作</h1>
		<h2 id="h2">1.<u>读取</u>节点</h2>
		<h2 id="h3">2.<u>查找</u>节点</h2>
		<h2 id="h4">3.<u>增删</u>节点</h2>
		<p>
			<img src="img/动物1.jpg" alt="" id="i1" class="ok">
		</p>
		<p id="p1" style="font-size: 20px;">aaa</p>
		<p id="p2" class="ok">bbb</p>
		<script type="text/javascript">
			//1.读写借点
			console.log("1----------")
			var h1 = document.getElementById("h1");
			console.log(h1.nodeName)
			console.log(document.nodeName)
			console.log(h1.nodeType)
			console.log(document.nodeType)
			//innerHtml 读写内容，带元素
			//innerText 读写内容，不带元素
			var h2 = document.getElementById("h2");
			console.log(h2.innerHTML)//1.<u>读取</u>节点
			console.log(h2.innerText)//1.读取节点
			
			// h2.innerHTML = "1.<del>读写节点</del>"
			h2.innerText = "1.<del>读写节点</del>"
			
			//读写节点的任何属性
			var img = document.getElementById("i1");
			console.log(img.getAttribute("src"))//img/动物1.jpg
			img.setAttribute("src","img/动物2.jpg")
			
			console.log(h2.id)
			console.log(img.src)
			
			//读写节点样式
			var p = document.getElementById("p1")
			console.log(p.style.fontSize) //20px
			var p2 = document.getElementById("p2")
			p2.className = "error"
			
			
		</script>
	</body>
</html>